<template>
  <div
    id="account_look"
    class="dialog animated"
    :class="open? 'fadeIn':'fadeOut'"
    v-show="show"
    :style="{visibility: (visible?'visible':'hidden')}"
  >
    <div class="panel animated" :class="open? 'zoomIn':''">
      <div class="title">
        {{title}}
        <div class="close" @click="cancel()"></div>
      </div>
      <div class="form">
        <el-form :model="accountData" ref="accountData" label-width="240px">
          <el-form-item label="账号：">
            <span>{{accountData.username}}</span>
          </el-form-item>
          <el-form-item label="注册时间：">
            <span>{{accountData.regTime}}</span>
          </el-form-item>
          <el-form-item label="最后一次登录时间：">
            <span>{{accountData.recentLoginTime}}</span>
          </el-form-item>
          <el-form-item label="孩子姓名：">
            <span>{{accountData.clueList? accountData.clueList[0].realName : ''}}</span>
          </el-form-item>
          <el-form-item label="年级：">
            <span>{{accountData.gradeName}}</span>
          </el-form-item>
          <el-form-item label="微信ID：">
            <span>{{accountData.webcat}}</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
var user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      title: "",
      gradeModeList: [],
      accountData: {}
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 1);
      console.log(data);
      vm.title = "查看账号";
      vm.gradeModeList.forEach(element => {

        if (data.clueList && element.value == data.clueList[0].grade) {
          data.gradeName = element.name;
          return;
        }
      });
      console.log(name);
      vm.accountData = data;
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    let dicdata = tool.getItem(lsKey.dict, true);
    this.gradeModeList = dicdata["grade_mode"]; //课程模式数据字典
  }
};
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style lang="scss">
#account_look {
 
  .form {
    padding: 0 0.3rem 0.3rem 0;
    font-size: 0.16rem;
    color: #666666;
    .el-form-item__label {
      font-size: 0.16rem;
      color: #666666;
    }
    .el-form-item__content {
      line-height: 0.4rem;
      position: relative;
      font-size: 0.16rem;
    }
    .el-form-item {
      margin-bottom: 0.12rem;
    }
  }
}
</style>
<style scoped>
 .panel {
    width: 8rem;
  }
</style>
